<template>
	<view class="cashierSystemPage">
		<view class="cashierSystemTop ">



			<view class="backgroundImage flex-columns">

				<view class="headformation flex-between">
					<view class="flex" @click="improveInformationFn">
						<!-- <image class="avater" src="../../static/会员卡管理端/组合 519.png" mode=""></image> -->
						<view style="margin-left: 10rpx; " class="flex-column-start">
							<view style="color: #fff;font-size: 32rpx;margin-bottom: 8rpx;">
								{{merchantInformation.name}}
							</view>
							<view style="color: rgb(255, 255, 255);">
								<text>账号：{{merchantInformation.phone}}</text>
							</view>
						</view>
					</view>
					<view class="membershipCode " @click="paymentCode()">
						<image class="codeImage" src="../../static/会员卡管理端/组合 2.png" mode=""></image>
						<view style="color: #fff;">
							收款码
						</view>
					</view>
				</view>
				<!-- 数据明细 -->
				<view v-if="role_type==3" class="flex-wrap-flex-start dataDetails">
					<view class="flex-column m-top15" style="width: 33.3%;" v-for="(item,i) in dataDetails" :key="i">
						<view class="margin-bottom_10rpx font-weight_bold" style="color: #fff;font-size: 36rpx;">
							{{(item.number)}}
						</view>
						<view style="color: rgba(255, 255, 255, 0.84);font-size: 24rpx;">
							{{item.text}}
						</view>
					</view>

				</view>
                <view v-else class="flex-around dataDetails">
                	<view class="flex-column m-top15"  v-for="(item,i) in dataDetail" :key="i">
                		<view class="margin-bottom_10rpx font-weight_bold" style="color: #fff;font-size: 36rpx;">
                			{{(item.number)}}
                		</view>
                		<view style="color: rgba(255, 255, 255, 0.84);font-size: 24rpx;">
                			{{item.text}}
                		</view>
                	</view>
                
                </view>
			</view>
			<scroll-view :scroll-y="true" style="max-height: 330rpx;min-height: 175rpx" v-if="userList.length>=1">
				<block v-for="(item,index) in userList" :key="index">
					<view class="flex-between margin-top_40rpx" @click="radioChangeUser(item,index)">
						<view class="flex">
							<image class="images" :src="item.avatar" mode=""></image>
							<view class="flex-columns-center margin-left_30rpx">
								<text class="font-weight_bold margin-bottom_10rpx"
									style="font-size: 30rpx;">昵称:{{item.nickname}}</text>
								<text style="color: rgb(153, 153, 153);font-size: 24rpx;margin-bottom: 5rpx;">
									手机号:{{item.phone?item.phone:'-'}}
								</text>
								<text style="color: rgb(153, 153, 153);;font-size: 24rpx;">
									{{item.create_time}}
								</text>
							</view>
						</view>
						<label class="radio">
							<radio style="transform:scale(0.7)" value="r1" :checked="index == currentindex" />
						</label>
					</view>
				</block>
			</scroll-view>


		</view>
		<view class="margin-top_20rpx background-color_FFFFFF" style="padding-bottom: 32rpx;">
			<view class="cashierSelection border-bottom-ECECEC" v-for="(item, index) in itemss" :key="index">
				<view class=" flex-between " @click="JumpPage(item.url)">
					<view class="flex">
						<image class="image " :src="item.img" mode=""></image>
						<view class=" margin-left_20rpx">
							{{item.name}}
						</view>
					</view>
					<label class="radio">
						<uni-icons style="margin-right: 15rpx;" type="right" size="15"></uni-icons>
						<!-- <radio-group @change="radioChange">
							<label class="uni-list-cell uni-list-cell-pd">
								<view>
									<radio style="transform:scale(0.7)" :value="item.value"
										:checked="index == current" />
								</view>
			
							</label>
						</radio-group> -->
					</label>
				</view>
			</view>

		</view>
		<!-- 消费统计 -->
		<view class="margin-top_50rpx dataCenterContainer">
			<view class="rechargeStatistics flex-between">
				<view class=" flex-start-center">
					<view class="line margin-right_16rpx">

					</view>

					<text class="font-weight_bold font-size_30rpx">核销统计</text>

				</view>
				<view class="selectTime flex-align-center">

					<view class="tab " v-for="(item, index) in orderStatusArr" :key="index">
						<view :class="[consumptionIndex == index ? 'active ' : ''] "
							@click="switchTimeTab(index,'recharge',item)">
							{{ item.value }}
						</view>
					</view>
				</view>
			</view>
		
			<view class="margin-top_20rpx" v-if="rechargeStatistics">
				<text class="font-weight_bold font40"
					style="color: rgb(250, 44, 25);">{{rechargeStatistics.month_goods_amount}}</text>
				<text style="color: rgb(250, 44, 25);">元</text>
			</view>

			<view class="consumerStatistics margin-top_40rpx">
				<view class="flex-between  ">
					<view class="flex-column" v-for="(item,i) in consumptionDataDetails" :key="i">
						<view class="margin-bottom_10rpx font-weight_bold">
							<text style="color: rgb(51, 51, 51);">￥</text>
							<text style="color:rgb(51, 51, 51);font-size: 28rpx;">{{(item.number)}}</text>
						</view>
						<view style="color: rgb(102, 102, 102);font-size: 24rpx;">
							{{item.text}}
						</view>
					</view>

				</view>
			</view>
			<!-- 图表 -->
			<qiun-data-charts type="line" enableScroll :opts="opts" :chartData="chartData" :ontouch='true'
			 />
			 <term-picker :visable.sync="pickerVisable" :defaultDate="defaultDate" @confirm="confirm"></term-picker>
		</view>
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		components: {

		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				role_type: uni.getStorageSync('login').role_type,
				startDate:null,
				defaultDate: [currentDate, currentDate],
				tabIndex: 4,
				account: '',
				current: 0,
				// 消费索引
				consumptionIndex: 0,
				currentindex: 100,
				name: '',
				userList: [],
				radioBool: false,
				merchantInformation: uni.getStorageSync('login'),
				token: uni.getStorageSync('login').token,
				// 收银名字
				cashier_name: '',
				chartData: null,
				xianshangAmount:[],
				rechargeStatistics: null,
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					dataLabel: false,

					dataPointShape: false,
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							min: 0,
							max: 1
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "custom",
							onShadow: true,
							animation: "horizontal"
						}
					}
				},
				timeData: '',
				dataDetails: [{
						number: 0,
						text: '套餐卡核销数量'
					},
					{
						number: 0,
						text: '用户充值金额'
					},
					{
						number: 0,
						text: '套餐卡购买金额'
					},
					{
						number: 0,
						text: '用户消费金额'
					},
					{
						number: 0,
						text: '聚合微信收款金额'
					},
					{
						number: 0,
						text: '聚合支付宝收款金额'
					},

				],
				dataDetail: [{
						number: 0,
						text: '套餐卡核销数量'
					},
					{
						number: 0,
						text: '用户充值金额'
					},
					{
						number: 0,
						text: '套餐卡购买金额'
					},
					{
						number: 0,
						text: '用户消费金额'
					},
				
				
				],
				orderStatusArr: [{
						value: '今日'
					},
					{
						value: '本月'
					},

					{
						value: '自定义'
					},

				],
				// 消费统计
				consumptionDataDetails: [{
						number: 0,
						text: '累计核销'
					},
					{
						number: 0,
						text: '今日核销'
					},
					{
						number: 0,
						text: '本月核销'
					},

				],
				formType: {
					id: '',
					cashierType: '0',
					balance: '',
					integral: '',
					// 抵扣类型
					deductionType: "0",


				},
				form: {
					start_time: "",
					end_time: "",
					consumption_start_time: "",
					consumption_end_time: "",
					user_start_time: '',
					user_end_time: "",
					type: '',
					uesr_type: '',
					consumption_type: ''
				},
				itemss: [{

						value: '0',
						name: '营收记录',
						checked: 'true',
						img: '../../static/会员卡管理端/组合 1098.png',
						url: '/pages/revenueRecords/cashierRevenueRecords'
					},
					{
						value: '1',
						name: '套餐卡记录',
						img: '../../static/会员卡管理端/组合 1097.png',
						url: '/pages/packageManagement/verificationRecord/verificationRecords'
					},
					{
						value: '2',
						name: '扫码收银',
						img: '../../static/会员卡后台端/组合 1137.png',

						url: '/pages/cashierSystem/scanQRCodeCashier'
					},
				],
				items: [{

						value: '0',
						name: '消费扣款',
						checked: 'true',
						img: '../../static/会员卡管理端/组合 914.png'
					},
					{
						value: '1',
						name: '余额充值',
						img: '../../static/会员卡管理端/组合 913.png'
					},
					{
						value: '2',
						name: '开通套餐卡',
						img: '../../static/会员卡管理端/组合 915.png'
					},
					{
						value: '3',
						name: '自提核销订单',
						img: '../../static/会员卡管理端/微信图片_20240507152357.png'
					}

				],
				currentMoment: null,
				endMoment: null,
				categoriesRecharge:[],
				pickerVisable:false
			}
		},
		onLoad() {

			this.init()
			this.homeDataFn()
			this.initialization()
		},
		onShow() {
			this.homeDataFn()
			this.$at.releaseKey('submit');
			this.$at.releaseKey('submitPay');
		},
		methods: {
			confirm(e) {
			
				console.log('点击确定按钮，返回当前选择的值', e); // ['2021-06-01', '2021-07-01']
				console.log('打印所有的范围日期e', e);
				this.startDate = e[0];
				// this.startDate = e[0]+'-'+e[1];
			
				this.form.type = 2
				Object.assign(this.form, {
					start_time: e[0] + ' 00:00:00',
					end_time: e[1] + ' 23:59:59'
				});
				this.rechargeStatisticsFn()
			
			
			},
			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
			
				return `${year}-${month}-${day}`;
			
			},
			initialization() {

				this.currentMoment = moment();
				this.currentMoment.startOf('day');

				const currentDate = this.currentMoment.format('YYYY-M-D HH:mm:ss');
				console.log(currentDate)
				this.form.start_time = currentDate

				this.form.type = 1

				this.endMoment = moment();

				// 获取当天的最后一秒
				this.endMoment.endOf('day');
				const endDate = this.endMoment.format('YYYY-M-D HH:mm:ss');

				this.form.end_time = endDate

				this.rechargeStatisticsFn()
			},
			paymentCode() {
				this.$sun.navGo('/pages/storePaymentCode/storePaymentCode')
			},
			switchTimeTab(index, type, item) {


				if (type == 'recharge') {
					this.consumptionIndex = index;
				} else if (type == 'consumption') {
					this.consumptionIndex = index;
				} else {
					this.uesrIndex = index;
				}
				console.log(type)
				if (index == 0 && item.value == '今日') {
					if (type == 'recharge') {
						this.form.type = 1
						this.currentMoment = moment();
						this.currentMoment.startOf('day');

						const currentDate = this.currentMoment.format('YYYY-M-D HH:mm:ss');
						console.log(currentDate)
						this.form.start_time = currentDate

						this.endMoment = moment();

						// 获取当天的最后一秒
						this.endMoment.endOf('day');
						const endDate = this.endMoment.format('YYYY-M-D HH:mm:ss');
						console.log(endDate)
						this.form.end_time = endDate
						this.rechargeStatisticsFn()
					} else if (type == 'consumption') {
						this.form.consumption_type = 1
						this.currentMoment = moment();
						this.currentMoment.startOf('day');

						const currentDate = this.currentMoment.format('YYYY-M-D HH:mm:ss');
						console.log(currentDate)
						this.form.consumption_start_time = currentDate

						this.endMoment = moment();

						// 获取当天的最后一秒
						this.endMoment.endOf('day');
						const endDate = this.endMoment.format('YYYY-M-D HH:mm:ss');
						console.log(endDate)
						this.form.consumption_end_time = endDate
						this.rechargeStatisticsFn()
					} else {
						this.form.uesr_type = 1
						this.currentMoment = moment();
						this.currentMoment.startOf('day');

						const currentDate = this.currentMoment.format('YYYY-M-D HH:mm:ss');
						console.log(currentDate)
						this.form.user_start_time = currentDate

						this.endMoment = moment();

						// 获取当天的最后一秒
						this.endMoment.endOf('day');
						const endDate = this.endMoment.format('YYYY-M-D HH:mm:ss');
						console.log(endDate)
						this.form.user_end_time = endDate
						this.rechargeStatisticsFn()
					}


				} else if (index == 1 && item.value == '本月') {
					type == 'recharge' ? this.form.type = 2 : type == 'consumption' ? this.form.consumption_type = 2 : this
						.form.uesr_type = 2

					this.currentMoment = moment();
					this.currentMoment.startOf('month');;

					const currentDate = this.currentMoment.format('YYYY-M-D HH:mm:ss');
					console.log('本月', currentDate)
					if (type === 'recharge') {
						this.form.start_time = currentDate;
					} else if (type === 'consumption') {
						this.form.consumption_start_time = currentDate;
					} else {
						this.form.user_start_time = currentDate;
					}
					// type == 'recharge' ? this.form.start_time : type == 'consumption' ? this.form.consumption_start_time :
					// 	this.form.user_start_time = currentDate
					// this.form.start_time = currentDate
					console.log(this.form.start_time, type)
					this.endMoment = moment();

					// 获取当天的最后一秒
					this.endMoment.endOf('day');

					const endDates = this.endMoment.format('YYYY-M-D HH:mm:ss');
					if (type === 'recharge') {
						this.form.end_time = endDates;
					} else if (type === 'consumption') {
						this.form.consumption_end_time = endDates;
					} else {
						this.form.user_end_time = endDates;
					}
					// type == 'recharge' ? this.form.end_time : type == 'consumption' ? this.form.consumption_end_time : this
					// 	.form.user_end_time = endDates
					console.log(endDates)
					console.log(this.form)
					this.rechargeStatisticsFn()

				} else {
					console.log('自定义')
					// 1 为充值 2 为消费 3用户
					type == 'recharge' ? this.customType = 1 : type == 'consumption' ? this.customType = 2 :
						this.customType = 3
					console.log(this.customType, type)
					this.openPicker()
				}

			},
			openPicker() {
				this.pickerVisable = true;
			},
			async rechargeStatisticsFn() {
				console.log(this.form)
				// 调用数据统计接口
				const result = await this.$http.post({
					url: this.$api.packageUseLogStatistics,
					data: {
						type: this.form.type,
						start_time: this.form.start_time,
						end_time: this.form.end_time,

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {

				

					
					// 充值统计
					this.categoriesRecharge = result.data.package_data.map((item) => {
						return item.datetime
					})
					this.consumptionDataDetails.forEach((item) => {
						switch (item.text) {
							case '累计核销':
								item.number = result.data.total_package_log;
								break;
							case '今日核销':
								item.number = result.data.today_package_log;
								break;
							case '本月核销':
								item.number = result.data.month_package_log;
								break;
								// 可根据实际情况继续添加其他匹配条件
						}
					})


					this.xianshangAmount = result.data.package_data.map((item) => {
						return item.count
					})
					
					this.getServerData();
					
				
					

				} else {
					this.$sun.toast(result.msg, 'none')
				}

			},
			// 充值统计
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: this.categoriesRecharge,
						series: [
							{
								name: "核销统计",
								linearColor: [
									
									[
										1,
										"#1890FF"
									]
								],
								setShadow: [
									3,
									8,
									10,
									"#1890FF"
								],
								data: this.xianshangAmount
							},
						
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			
			async homeDataFn() {
				const result = await this.$http.post({
					url: this.$api.staffStatistics,
					data: {


					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {

					this.timeData = result.data
					
					if(this.role_type==3){
						this.dataDetails.forEach((item) => {
							switch (item.text) {
								case '套餐卡核销数量':
									item.number = this.timeData.package_use_count;
									break;
								case '用户充值金额':
									item.number = this.timeData.recharge_amount;
									break;
								case '套餐卡购买金额':
									item.number = this.timeData.package_amount;
									break;
								case '用户消费金额':
									item.number = this.timeData.consumption_amount;
									break;
								case '聚合微信收款金额':
									item.number = this.timeData.polymerization_wechat;
									break;
								case '聚合支付宝收款金额':
									item.number = this.timeData.polymerization_ali;
									break;
									// 可根据实际情况继续添加其他匹配条件
							}
						})
					}else{
						this.dataDetail.forEach((item) => {
							switch (item.text) {
								case '套餐卡核销数量':
									item.number = this.timeData.package_use_count;
									break;
								case '用户充值金额':
									item.number = this.timeData.recharge_amount;
									break;
								case '套餐卡购买金额':
									item.number = this.timeData.package_amount;
									break;
								case '用户消费金额':
									item.number = this.timeData.consumption_amount;
									break;
							
									// 可根据实际情况继续添加其他匹配条件
							}
						})
					}
					
				} else {
					this.$sun.toast(result.msg, 'none')
				}
			},
			// 跳转页面
			JumpPage(url) {
				this.$sun.navGo(url)
			},
			async init() {
				const res = await this.$http.post({
					url: this.$api.config,
					data: {


					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				console.log(res)
				this.cashier_name = res.data.cashier_name
			},
			// 关闭购物弹层
			closeWriteOffIcon() {
				this.$refs.receiveCouponPopup.close()
			},
			radioChange(evt) {
				console.log(evt)
				// 0 消费扣款 1 余额充值 2开通套餐卡
				this.formType.cashierType = evt.detail.value
				this.current = evt.detail.value
			},
			radioChangeUser(item, i) {
				// this.radioBool = !this.radioBool
				console.log(item, i)
				this.currentindex = i

				this.formType.id = item.id
				this.formType.balance = item.balance
				this.formType.integral = item.surplus_integral ? item.surplus_integral : item.integral

			},
			getVerificationCode() {

				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
						if (!this.name) {
							this.$sun.toast("请输入会员名", 'none')
							this.userList = []
							this.$at.releaseKey('submit');
						} else {

							const res = await this.$http.post({
								url: this.$api.userListApi,
								data: {

									name: this.name
								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}

							})
							console.log(res)
							if (res.code == 0) {
								if (res.data.list.length) {
									this.userList = res.data.list

									// 跳转到登录页面
									this.$at.releaseKey('submit');

								} else {
									this.$sun.toast('没有查询到该用户', 'none')
									this.$at.releaseKey('submit');
								}




							} else {
								this.$at.releaseKey('submit');
								this.$sun.toast(res.msg, 'none')
							}
						}




					}
				});


			},
			// 选择收银方式选择下一步
			nextPay() {
				if (!this.name) {
					this.$sun.toast("请输入会员名", 'none')
					this.userList = []

				} else {
					// 0 消费扣款 1 余额充值 2开通套餐卡
					this.$at.uniDoFunc({
						key: 'submitPay',
						success: async () => {
							this.$at.lockKey('submitPay');

							if (this.formType.cashierType == 3) {
								this.$at.releaseKey('submitPay');
								this.$sun.navGo('/pages/orderManagement/orderManagement')
							} else {
								// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
								if (!this.formType.id) {
									this.$at.releaseKey('submitPay');
									this.$sun.toast("请输入会员名", 'none')

								} else {
									if (this.formType.cashierType == 0) {
										this.$at.releaseKey('submitPay');
										this.$sun.navGo(
											'/pages/cashierSystem/deductionAmount/deductionAmount', {
												...this.formType
											})


									} else if (this.formType.cashierType == 1) {
										this.$at.releaseKey('submitPay');
										this.$sun.navGo(
											'/pages/cashierSystem/balanceRecharge/balanceRecharge', {
												...this.formType
											})


									} else if (this.formType.cashierType == 2) {
										this.$at.releaseKey('submitPay');
										this.$sun.navGo(
											'/pages/cashierSystem/choosePackageCard/choosePackageCard', {
												...this.formType
											})

									}
								}
							}
						}
					});
				}

			}
		}
	}
</script>

<style lang="less" scoped>
	.cashierSystemPage {
		margin-bottom: 96rpx;

		.dataCenterContainer {
			padding: 38rpx 30rpx;
			margin-top: -18rpx;
			border-radius: 20rpx;
			
			background: rgb(255, 255, 255);

			.rechargeStatistics {
				.line {
					width: 8rpx;
					height: 34rpx;
					background: rgb(108, 133, 252);
				}

				.selectTime {


					.tab {

						list-style-type: none;
						margin-right: 20rpx;
						display: block;
						width: 106rpx;
						height: 44rpx;
						line-height: 44rpx;

						border: 1px solid rgb(239, 239, 239);
						text-align: center;
						background: rgb(255, 255, 255);
						color: rgb(153, 153, 153);
					}

					.active {
						width: 106rpx;
						height: 44rpx;

						background: rgb(108, 133, 252);
						color: rgb(255, 255, 255);
						;
						text-align: center;
						line-height: 44rpx;
					}

					.orderStatus {
						width: 90px;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;
						font-weight: 700;

					}

				}

			}

			.consumerStatistics {


				border-radius: 10px;

				background: rgb(243, 249, 255);
				padding: 36rpx 46rpx;
			}


		}

		.fixed {

			position: fixed;
			bottom: 20rpx;
			width: 100%;
			z-index: 999;

			.scanCodeBtn {
				width: 268.32rpx;
				height: 96rpx;
				box-sizing: border-box;
				border: 2rpx solid rgb(0, 87, 254);
				background: rgb(255, 255, 255);
				color: rgb(0, 87, 254);
			}

			.nextBtn {
				margin: 0 12rpx;
				height: 96rpx;
				background: rgb(0, 87, 254);
				color: rgb(255, 255, 255);

			}
		}

		.backgroundImage {
			padding: 36rpx 30rpx;
			background-image: url('../../static/会员卡管理端/6045b99a804a5_01.png');

			background-repeat: no-repeat;
			background-size: cover;

			.headformation {


				.avater {
					width: 96rpx;
					height: 96rpx;
					margin-right: 15rpx;
				}

				.memberType {
					/* 矩形 1043 */
					color: rgb(255, 255, 255);
					font-family: 思源黑体;
					font-size: 24rpx;
					font-weight: 400;
					border-radius: 12rpx;
					width: 112rpx;
					height: 36rpx;
					background-color: rgb(108, 133, 252);
				}

				.membershipCode {
					display: flex;
					flex-direction: column;
					align-items: center;

					.codeImage {
						margin-bottom: 8rpx;
						width: 32.02rpx;
						height: 31.16rpx;
					}
				}
			}
		}

		.cashierSelection {

			padding: 30rpx;

			.image {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
			}


			background: rgb(255, 255, 255);
		}

		.cashierSystemTop {


			.img {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}


			background: rgb(255, 255, 255);

			.searchBtn {
				padding: 30rpx;

				.inputIphone {

					height: 92rpx;
					padding: 26rpx 0 26rpx 20rpx;
					box-sizing: border-box;
					border-radius: 0;
					border-radius: 20rpx 0rpx 0rpx 20rpx;
					background: rgb(246, 246, 246);
				}

				.verificationCode {
					width: 36rpx;
					height: 36rpx;
				}

				.iphones {


					.verificationCodes {

						text-align: center;
						width: 170rpx;
						height: 85rpx;
						line-height: 85rpx;
						border-radius: 100rpx;
						font-size: 20rpx;

						border-radius: 0px 10px 10px 0px;


						background: rgb(28, 110, 255);
						color: #fff;
					}
				}
			}

			.images {
				width: 116rpx;
				height: 116rpx;
				border-radius: 50%;
			}
		}
	}

	page {
		background: #f6f6f6;
	}
</style>